<!-- 可以滚动的tabs -->
<template>
	<view v-if="tabs && tabs.length" class="tabs" :class="[{ 'tabs-fixed': fixed, 'bg-white': fixed }]">
		<scroll-view id="tab-bar" class="tabs-scroll-h" scroll-x="true" show-scrollbar="false" :scroll-into-view="scrollInto">
			<view v-for="(tab, index) in tabs" :key="index" class="tabs-item" :id="index" :data-current="index" @tap="tabClick(index)">
				<text class="tabs-item-title" :class="value == index ? 'tabs-item-title-active' : ''">{{ tab.name }}</text>
			</view>
		</scroll-view>
	</view>
</template>

<script>
export default {
	props: {
		tabs: Array,
		value: {
			// 当前显示的下标 (使用v-model语法糖: 1.props需为value; 2.需回调input事件)
			type: [String, Number],
			default() {
				return 0;
			}
		},
		fixed: Boolean // 是否悬浮,默认false
	},
	computed: {
		//滚动到该元素的id
		scrollInto() {
			return this.tabs[this.value].id;
		}
	},
	methods: {
		//tab的点击事件
		tabClick(i) {
			if (this.value != i) {
				this.$emit('input', i);
				this.$emit('change', i);
			}
		}
	}
};
</script>

<style>
.tabs {
	position: relative;
	height: 80upx;
	line-height: 80upx;
	font-size: 24rpx;
	/* border-bottom: 1rpx solid #eee; */
}

/*悬浮*/
.tabs.tabs-fixed {
	z-index: 9999;
	position: fixed;
	/* #ifdef H5 */
	top: 88upx;
	/* #endif */
	/* #ifdef APP-PLUS */
	top: 126upx;
	/* #endif */
	width: 100%;
}

.tabs-scroll-h {
	width: 750upx;
	height: 80upx;
	flex-direction: row;
	/* #ifndef APP-PLUS */
	/* white-space: nowrap; */
	/* #endif */
}

.tabs-item {
	/* #ifndef APP-PLUS */
	/* display: inline-block; */
	/* #endif */
	flex-wrap: nowrap;
	padding-left: 34upx;
	padding-right: 34upx;
}

.tabs-item-title {
	color: #555;
	font-size: 30upx;
	height: 80upx;
	line-height: 80upx;
	flex-wrap: nowrap;
	/* #ifndef APP-PLUS */
	/* white-space: nowrap; */
	/* #endif */
}

.tabs-item-title-active {
	color: #007aff;
}
</style>
